<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>休闲钓鱼</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        game: ['Arial', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .water-animation {
                background: linear-gradient(to bottom, rgba(59, 130, 246, 0.3) 0%, rgba(59, 130, 246, 0.8) 100%);
                animation: water-move 4s infinite alternate;
            }
            .float-bounce {
                animation: float 2s infinite ease-in-out;
            }
            .cast-animation {
                animation: cast 1.5s ease-out forwards;
            }
            .reel-animation {
                animation: reel 1s ease-in-out;
            }
            .fish-caught {
                animation: caught 0.5s ease-in-out;
            }
        }

        @keyframes water-move {
            0% { background-position: 0 0; }
            100% { background-position: 0 20px; }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        @keyframes cast {
            0% { transform: translateY(-100px) translateX(0); }
            60% { transform: translateY(50px) translateX(100px); }
            100% { transform: translateY(30px) translateX(150px); }
        }

        @keyframes reel {
            0% { transform: translateY(30px) translateX(150px); }
            100% { transform: translateY(-100px) translateX(0); }
        }

        @keyframes caught {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }
    </style>
</head>
<body class="font-game bg-gradient-to-b from-blue-50 to-blue-100 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <header class="text-center mb-8">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-2">休闲钓鱼</h1>
            <p class="text-gray-600 mb-4">点击抛竿，等待鱼上钩，再点击收竿！</p>
            <div class="flex justify-center gap-4 mb-6">
                <div class="bg-white p-3 rounded-lg shadow-md flex items-center">
                    <i class="fa fa-trophy text-yellow-500 mr-2"></i>
                    <span class="font-bold">得分: <span id="score" class="text-primary">0</span></span>
                </div>
                <div class="bg-white p-3 rounded-lg shadow-md flex items-center">
                    <i class="fa fa-clock-o text-blue-500 mr-2"></i>
                    <span class="font-bold">时间: <span id="timer" class="text-primary">60</span>s</span>
                </div>
                <div class="bg-white p-3 rounded-lg shadow-md flex items-center">
                    <i class="fa fa-fish text-green-500 mr-2"></i>
                    <span class="font-bold">钓到: <span id="fish-count" class="text-primary">0</span></span>
                </div>
            </div>
        </header>

        <main class="relative bg-white rounded-xl shadow-xl overflow-hidden mb-8">
            <!-- 湖泊区域 -->
            <div class="relative h-[400px] bg-gradient-to-b from-blue-300 to-blue-600">
                <!-- 水面波纹 -->
                <div class="water-animation absolute inset-0 opacity-30"></div>
                
                <!-- 钓鱼竿 -->
                <div id="fishing-rod" class="absolute top-20 left-1/4 transform -translate-x-1/2">
                    <div class="h-40 w-2 bg-amber-800 rounded-full transform -rotate-30 origin-bottom"></div>
                    <div id="line" class="absolute top-0 left-1/2 h-60 w-0.5 bg-gray-700 transform -translate-x-1/2"></div>
                    <div id="float" class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-4 h-6 bg-red-500 rounded-t-full float-bounce"></div>
                </div>

                <!-- 鱼群 -->
                <div id="fish-container" class="absolute inset-0 overflow-hidden">
                    <!-- 鱼会动态生成在这里 -->
                </div>

                <!-- 气泡效果 -->
                <div id="bubbles" class="absolute inset-0 pointer-events-none">
                    <!-- 气泡会动态生成在这里 -->
                </div>
            </div>

            <!-- 游戏控制区域 -->
            <div class="bg-gray-100 p-6 flex justify-center">
                <button id="cast-button" class="bg-primary hover:bg-primary/90 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/50">
                    <i class="fa fa-arrow-right mr-2"></i>抛竿
                </button>
            </div>
        </main>

        <!-- 钓到的鱼展示 -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <h2 class="text-xl font-bold text-dark mb-4">钓到的鱼</h2>
            <div id="caught-fish" class="flex flex-wrap gap-4">
                <div class="text-gray-500 italic">还没有钓到任何鱼</div>
            </div>
        </div>

        <!-- 游戏结束弹窗 -->
        <div id="game-over-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-xl shadow-2xl p-8 max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
                <div class="text-center">
                    <div class="inline-block p-4 bg-green-100 rounded-full mb-4">
                        <i class="fa fa-trophy text-4xl text-yellow-500"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-dark mb-2">游戏结束!</h2>
                    <p class="text-gray-600 mb-4">你的钓鱼之旅结束了</p>
                    <div class="space-y-2 mb-6">
                        <div class="flex justify-between">
                            <span class="text-gray-600">最终得分:</span>
                            <span class="font-bold text-primary" id="final-score">0</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">钓到的鱼:</span>
                            <span class="font-bold text-primary" id="final-fish-count">0</span>
                        </div>
                    </div>
                    <button id="play-again-button" class="bg-primary hover:bg-primary/90 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/50">
                        再玩一次
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 游戏状态
        const gameState = {
            isCasting: false,
            isFishing: false,
            score: 0,
            fishCount: 0,
            timeLeft: 60,
            timerInterval: null,
            fishList: [],
            fishTypes: [
                { name: '小鱼', value: 10, size: 20, color: '#3B82F6' },
                { name: '中等鱼', value: 25, size: 35, color: '#10B981' },
                { name: '大鱼', value: 50, size: 50, color: '#F59E0B' },
                { name: '稀有鱼', value: 100, size: 60, color: '#8B5CF6' }
            ],
            caughtFish: []
        };

        // DOM元素
        const elements = {
            castButton: document.getElementById('cast-button'),
            float: document.getElementById('float'),
            line: document.getElementById('line'),
            fishingRod: document.getElementById('fishing-rod'),
            score: document.getElementById('score'),
            timer: document.getElementById('timer'),
            fishCount: document.getElementById('fish-count'),
            fishContainer: document.getElementById('fish-container'),
            bubbles: document.getElementById('bubbles'),
            caughtFish: document.getElementById('caught-fish'),
            gameOverModal: document.getElementById('game-over-modal'),
            modalContent: document.getElementById('modal-content'),
            finalScore: document.getElementById('final-score'),
            finalFishCount: document.getElementById('final-fish-count'),
            playAgainButton: document.getElementById('play-again-button')
        };

        // 初始化游戏
        function initGame() {
            elements.castButton.addEventListener('click', handleCast);
            elements.float.addEventListener('click', handleReel);
            elements.playAgainButton.addEventListener('click', resetGame);
            createBubbles();
            startTimer();
            generateFish();
        }

        // 抛竿
        function handleCast() {
            if (gameState.isCasting || gameState.isFishing) return;

            gameState.isCasting = true;
            elements.castButton.disabled = true;
            elements.castButton.classList.add('opacity-50', 'cursor-not-allowed');
            elements.castButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>抛竿中...';

            // 重置鱼漂位置
            elements.float.style.bottom = '0';
            elements.float.style.left = '50%';
            elements.line.style.height = '60px';

            // 添加抛竿动画
            elements.fishingRod.classList.add('cast-animation');

            setTimeout(() => {
                gameState.isCasting = false;
                gameState.isFishing = true;
                elements.castButton.innerHTML = '<i class="fa fa-check mr-2"></i>等待鱼上钩...';
                
                // 随机时间后鱼咬钩
                const biteTime = Math.random() * 5000 + 1000;
                setTimeout(triggerFishBite, biteTime);
            }, 1500);
        }

        // 鱼咬钩
        function triggerFishBite() {
            if (!gameState.isFishing) return;

            // 鱼漂下沉动画
            elements.float.classList.add('animate-pulse');
            elements.float.style.transform = 'translate(-50%, 10px)';
            elements.castButton.innerHTML = '<i class="fa fa-hand-pointer-o mr-2"></i>点击收竿!';
        }

        // 收竿
        function handleReel() {
            if (!gameState.isFishing) return;

            gameState.isFishing = false;
            elements.float.classList.remove('animate-pulse');
            
            // 添加收竿动画
            elements.fishingRod.classList.remove('cast-animation');
            elements.fishingRod.classList.add('reel-animation');

            // 随机决定是否钓到鱼
            const isFishCaught = Math.random() > 0.3;
            
            if (isFishCaught) {
                // 随机选择鱼的种类
                const fishType = getRandomFishType();
                gameState.score += fishType.value;
                gameState.fishCount++;
                gameState.caughtFish.push(fishType);
                
                // 更新UI
                updateScore();
                updateFishCount();
                showCaughtFish(fishType);
                
                // 显示钓到鱼的动画
                elements.float.classList.add('fish-caught');
                setTimeout(() => {
                    elements.float.classList.remove('fish-caught');
                }, 500);
            }

            setTimeout(() => {
                // 重置UI
                elements.fishingRod.classList.remove('reel-animation');
                elements.castButton.disabled = false;
                elements.castButton.classList.remove('opacity-50', 'cursor-not-allowed');
                elements.castButton.innerHTML = '<i class="fa fa-arrow-right mr-2"></i>抛竿';
                elements.float.style.transform = 'translate(-50%, 0)';
            }, 1000);
        }

        // 获取随机鱼的种类
        function getRandomFishType() {
            // 稀有鱼概率较低
            const random = Math.random();
            if (random < 0.6) {
                return gameState.fishTypes[0]; // 小鱼
            } else if (random < 0.85) {
                return gameState.fishTypes[1]; // 中等鱼
            } else if (random < 0.95) {
                return gameState.fishTypes[2]; // 大鱼
            } else {
                return gameState.fishTypes[3]; // 稀有鱼
            }
        }

        // 更新分数
        function updateScore() {
            elements.score.textContent = gameState.score;
        }

        // 更新钓到的鱼数量
        function updateFishCount() {
            elements.fishCount.textContent = gameState.fishCount;
        }

        // 显示钓到的鱼
        function showCaughtFish(fishType) {
            // 清除"还没有钓到任何鱼"的提示
            if (gameState.fishCount === 1) {
                elements.caughtFish.innerHTML = '';
            }
            
            const fishElement = document.createElement('div');
            fishElement.className = 'bg-gray-50 p-3 rounded-lg shadow flex items-center gap-3';
            fishElement.innerHTML = `
                <div class="w-8 h-4 rounded-full" style="background-color: ${fishType.color}"></div>
                <div>
                    <div class="font-bold text-gray-800">${fishType.name}</div>
                    <div class="text-sm text-gray-500">价值: ${fishType.value} 分</div>
                </div>
            `;
            
            // 添加到钓到的鱼列表
            elements.caughtFish.appendChild(fishElement);
            
            // 添加动画效果
            fishElement.style.opacity = '0';
            fishElement.style.transform = 'translateY(10px)';
            setTimeout(() => {
                fishElement.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                fishElement.style.opacity = '1';
                fishElement.style.transform = 'translateY(0)';
            }, 10);
        }

        // 开始计时器
        function startTimer() {
            gameState.timerInterval = setInterval(() => {
                gameState.timeLeft--;
                elements.timer.textContent = gameState.timeLeft;
                
                if (gameState.timeLeft <= 0) {
                    endGame();
                } else if (gameState.timeLeft <= 10) {
                    elements.timer.classList.add('text-red-500', 'animate-pulse');
                }
            }, 1000);
        }

        // 结束游戏
        function endGame() {
            clearInterval(gameState.timerInterval);
            
            // 更新弹窗内容
            elements.finalScore.textContent = gameState.score;
            elements.finalFishCount.textContent = gameState.fishCount;
            
            // 显示游戏结束弹窗
            elements.gameOverModal.classList.remove('hidden');
            setTimeout(() => {
                elements.modalContent.classList.remove('scale-95', 'opacity-0');
                elements.modalContent.classList.add('scale-100', 'opacity-100');
            }, 10);
        }

        // 重置游戏
        function resetGame() {
            // 隐藏弹窗
            elements.modalContent.classList.remove('scale-100', 'opacity-100');
            elements.modalContent.classList.add('scale-95', 'opacity-0');
            
            setTimeout(() => {
                elements.gameOverModal.classList.add('hidden');
                
                // 重置游戏状态
                gameState.isCasting = false;
                gameState.isFishing = false;
                gameState.score = 0;
                gameState.fishCount = 0;
                gameState.timeLeft = 60;
                gameState.caughtFish = [];
                
                // 重置UI
                updateScore();
                updateFishCount();
                elements.timer.textContent = gameState.timeLeft;
                elements.timer.classList.remove('text-red-500', 'animate-pulse');
                elements.caughtFish.innerHTML = '<div class="text-gray-500 italic">还没有钓到任何鱼</div>';
                elements.castButton.disabled = false;
                elements.castButton.classList.remove('opacity-50', 'cursor-not-allowed');
                elements.castButton.innerHTML = '<i class="fa fa-arrow-right mr-2"></i>抛竿';
                elements.float.style.transform = 'translate(-50%, 0)';
                elements.fishingRod.classList.remove('cast-animation', 'reel-animation');
                
                // 清除鱼和气泡
                elements.fishContainer.innerHTML = '';
                elements.bubbles.innerHTML = '';
                
                // 重新开始游戏
                createBubbles();
                generateFish();
                startTimer();
            }, 300);
        }

        // 创建气泡效果
        function createBubbles() {
            setInterval(() => {
                if (!gameState.isFishing) return;
                
                const bubble = document.createElement('div');
                const size = Math.random() * 10 + 5;
                const left = Math.random() * 80 + 10; // 10% to 90%
                const duration = Math.random() * 5 + 3;
                
                bubble.className = 'absolute rounded-full bg-white/30';
                bubble.style.width = `${size}px`;
                bubble.style.height = `${size}px`;
                bubble.style.bottom = '-10px';
                bubble.style.left = `${left}%`;
                bubble.style.animation = `float ${duration}s linear forwards`;
                
                elements.bubbles.appendChild(bubble);